{% extends  'base.html' %}
        
{% block content %}
	
	<h1>{{ uidp.name }} </h1>
	
	<div class="actions ">
		<div class="float_left"><a href="/collections/{{collection.id}}/uidps/{{uidp.id}}/edit"><img src="/static/images/edit.png" alt="Editar Padrão"/>Editar Padrão</a></div>
		<div class="float_left"><a href="/collections/{{collection.id}}/uidps/{{uidp.id}}/solutions/new"><img src="/static/images/solution.png" alt="Adicionar Solução"/>Adicionar Solução</a></div>
		<div class="float_left"><a href="/collections/{{collection.id}}/uidps/{{uidp.id}}/examples/new"><img src="/static/images/example.png" alt="Adicionar Exemplo"/>Adicionar Exemplo</a></div>
		<div class="float_left"><a href="/collections/{{collection.id}}/uidps/{{uidp.id}}/relationship/new"><img src="/static/images/rel.png" alt="Adicionar Relacionamento"/>Adicionar Relacionamento</a></div>
	</div>
	<div class="clearfloat"></div>
	
	<div class="float_left" style="width:800px">
	{% if uidp.problem %}
		<h2>Problem</h2>
		<p>{{ uidp.problem }}</p>
	{% endif %}
	
	{% if uidp.context %}
		<h2>Context</h2>
		<p>{{ uidp.context }}</p>
	{% endif %}

	{% if uidp.context %}
		<h2>Categorias</h2>
		{% for c in categories %}
			<p>{{c.name}}</p>
		{% endfor %}
	{% endif %}
	
	{% if solution %}
		<h2>Solution</h2>
		<p></p>
	{% endif %}

	{% if uidp.rationale %}
		<h2>Context</h2>
		<p>{{ uidp.rationale }}</p>
	{% endif %}
	
	{% if examples %}
		<h2>Implementation Examples</h2>
		
		<table>
			<tr>
				<td class="table_col header">Name</td>
				<td class="table_col header">Link</td>
				<td class="table_col header">Target Version</td>
				<td class="table_col header">Description</td>
			</tr>
			{% for example in examples %}
				{{example.example_type}}
				<tr>
					<td>{{example.name}}</td>
					<td><a href="{{example.link}}" target="_blank">{{example.link}}</a></td>
					<td>{{example.target_version}}</td>
					<td>{{example.description}}</td>
				</tr>
			{% endfor %}
		</table>
	{% endif %}
	
	{% if solutions %}
		<h2>Solution</h2>
		
		<table>
			<tr>
				<td class="table_col header">Target Version</td>
				<td class="table_col header">Solution Description</td>
			</tr>
			{% for solution in solutions %}
				<tr>
					<td>{{solution.target_version}}</td>
					<td>{{solution.solution}}</td>
				</tr>
			{% endfor %}
		</table>

	{% endif %}
		
	{% if images %}
		<h2>Screenshots</h2>
		<p class="small">All designs are copyright of their respective owners.</p>
		<div id="screenshots" class="center" style="height:450px;">
		
		{% for image in images %}
			<div title="{{image.id}}">
				<a href="{{image.parent_link}}">
					<img src="{{image.image_link}}" target="_blank" alt="{{image.name}}" style="height:450px;" />
				</a>
			</div>												
		{% endfor %}
		</div>
		<p>Os exemplos apresentados acima foram encontrados nas referências abaixo.</p
		<ul>
			{% for link in references %}
				<li><a href="{{link.parent_link}}" target="_blank">{{link.parent_name}}</a></li>
			{% endfor %}
		</ul>
	
		<script type="text/javascript">		
			$(document).ready(function(){ $('#screenshots').jshowoff({ 
				effect: 'none',
				hoverPause: false,
				controls: true,
				controlText: {
					play: 'Play',
					pause: 'Pause',
					previous: 'Previous',
					next: 'Next'
				}, 
				links: false,
				speed: 3000
			}); });
		</script>
	
	{% endif %}
	</div>
	<div class="float_left w100">
		<h2>Relacionamentos</h2>
		{% if relationships or relationships_as_target %}
			{% for rel in relationships %}
				<div>{{rel.relationship_type}} : <a href="/collections/{{collection_id}}/uidps/{{rel.target.id}}">{{rel.target}}</a></div>
			{% endfor %}
			{% for rel in relationships_as_target %}
				<div>{{rel.relationship_type}} : <a href="/collections/{{collection_id}}/uidps/{{rel.source.id}}">{{rel.source}}</a></div>
			{% endfor %}
		{% else %}
			<p>Nenhum relacionamento.</p>
		{% endif %}
		
		<h2>Other Collections</h2>
		{% for collection in other_collections %}
			<p><a href="/collections/{{collection.id}}/uidps/{{uidp.id}}">{{collection}}</a></p>
		{% endfor %}
	</div>
	
{% endblock %}